<!-- 添加定时设置 -->
<template>
    <div class="tjdssz">
        <el-tabs v-model="activeName">
            <el-tab-pane label="秒" name="one">
                <div class="form">
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form1.second" label="1" style="line-height: 36px; margin-right: 10px"></el-radio>每秒
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio
                                v-model="form1.second"
                                label="2"
                                style="line-height: 36px; margin-right: 10px; margin-bottom: 5px"
                            ></el-radio
                            >周期从
                            <el-input-number v-model="form1.ks" :min="0" :max="59" label="请选择" style="width: 120px"></el-input-number> -
                            <el-input-number v-model="form1.js" :min="0" :max="59" label="请选择" style="width: 120px"></el-input-number> 秒
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form1.second" label="3" style="line-height: 36px; margin-right: 10px"></el-radio>从
                            <el-input-number v-model="form1.zxks" :min="0" :max="59" label="请选择" style="width: 120px"></el-input-number
                            >秒开始,每
                            <el-input-number v-model="form1.zxjs" :min="0" :max="59" label="请选择" style="width: 120px"></el-input-number
                            >秒执行一次
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form1.second" label="4" style="line-height: 36px; margin-right: 10px"></el-radio>指定
                            <div style="margin-left: 23px">
                                <el-checkbox
                                    v-model="item.isCheck"
                                    v-for="item in timeRange"
                                    v-bind:key="item.value"
                                    @change="changeCheck"
                                    >{{ item.value }}</el-checkbox
                                >
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-tab-pane>
            <el-tab-pane label="分钟" name="two">
                <div class="form">
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form2.second" label="1" style="line-height: 36px; margin-right: 10px"></el-radio>每分钟
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio
                                v-model="form2.second"
                                label="2"
                                style="line-height: 36px; margin-right: 10px; margin-bottom: 5px"
                            ></el-radio
                            >周期从
                            <el-input-number v-model="form2.ks" :min="0" :max="59" label="请选择" style="width: 120px"></el-input-number> -
                            <el-input-number v-model="form2.js" :min="0" :max="59" label="请选择" style="width: 120px"></el-input-number>
                            分钟
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form2.second" label="3" style="line-height: 36px; margin-right: 10px"></el-radio>从
                            <el-input-number v-model="form2.zxks" :min="0" :max="59" label="请选择" style="width: 120px"></el-input-number
                            >分钟开始,每
                            <el-input-number v-model="form2.zxjs" :min="0" :max="59" label="请选择" style="width: 120px"></el-input-number
                            >分钟执行一次
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form2.second" label="4" style="line-height: 36px; margin-right: 10px"></el-radio>指定
                            <div style="margin-left: 23px">
                                <el-checkbox
                                    v-model="item.isCheck"
                                    v-for="item in timeRange"
                                    v-bind:key="item.value"
                                    @change="changeCheck"
                                    >{{ item.value }}</el-checkbox
                                >
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-tab-pane>
            <el-tab-pane label="小时" name="three">
                <div class="form">
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form3.second" label="1" style="line-height: 36px; margin-right: 10px"></el-radio>每小时
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio
                                v-model="form3.second"
                                label="2"
                                style="line-height: 36px; margin-right: 10px; margin-bottom: 5px"
                            ></el-radio
                            >周期从
                            <el-input-number v-model="form3.ks" :min="0" :max="23" label="请选择" style="width: 120px"></el-input-number> -
                            <el-input-number v-model="form3.js" :min="0" :max="23" label="请选择" style="width: 120px"></el-input-number> 时
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form3.second" label="3" style="line-height: 36px; margin-right: 10px"></el-radio>从
                            <el-input-number v-model="form3.zxks" :min="0" :max="59" label="请选择" style="width: 120px"></el-input-number
                            >小时开始,每
                            <el-input-number v-model="form3.zxjs" :min="0" :max="59" label="请选择" style="width: 120px"></el-input-number
                            >小时执行一次
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form3.second" label="4" style="line-height: 36px; margin-right: 10px"></el-radio>指定
                            <div style="margin-left: 23px">
                                <div style="margin-bottom: 10px">
                                    上午：
                                    <el-checkbox
                                        v-model="item.isCheck"
                                        v-for="item in amRange"
                                        v-bind:key="item.value"
                                        @change="changeCheck"
                                        >{{ item.value }}</el-checkbox
                                    >
                                </div>
                                <div>
                                    下午：
                                    <el-checkbox
                                        v-model="item.isCheck"
                                        v-for="item in pmRange"
                                        v-bind:key="item.value"
                                        @change="changeCheck"
                                        >{{ item.value }}</el-checkbox
                                    >
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-tab-pane>
            <el-tab-pane label="日" name="four">
                <div class="form">
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form4.second" label="1" style="line-height: 36px; margin-right: 10px"></el-radio>每日
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio
                                v-model="form4.second"
                                label="2"
                                style="line-height: 36px; margin-right: 10px; margin-bottom: 5px"
                            ></el-radio
                            >周期从
                            <el-input-number v-model="form4.ks" :min="1" :max="365" label="请选择" style="width: 120px"></el-input-number> -
                            <el-input-number v-model="form4.js" :min="1" :max="365" label="请选择" style="width: 120px"></el-input-number>
                            日
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form4.second" label="3" style="line-height: 36px; margin-right: 10px"></el-radio>从
                            <el-input-number v-model="form4.zxks" :min="1" :max="365" label="请选择" style="width: 120px"></el-input-number
                            >日开始,每
                            <el-input-number v-model="form4.zxjs" :min="1" :max="365" label="请选择" style="width: 120px"></el-input-number
                            >日执行一次
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form4.second" label="4" style="line-height: 36px; margin-right: 10px"></el-radio>指定
                            <div style="margin-left: 23px; max-height: 200px; overflow: auto">
                                <el-checkbox
                                    v-model="item.isCheck"
                                    v-for="item in dayRange"
                                    v-bind:key="item.value"
                                    @change="changeCheck"
                                    >{{ item.value }}</el-checkbox
                                >
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-tab-pane>
            <el-tab-pane label="月" name="five">
                <div class="form">
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form5.second" label="1" style="line-height: 36px; margin-right: 10px"></el-radio>每月
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio
                                v-model="form5.second"
                                label="2"
                                style="line-height: 36px; margin-right: 10px; margin-bottom: 5px"
                            ></el-radio
                            >周期从
                            <el-input-number v-model="form5.ks" :min="0" :max="59" label="请选择" style="width: 120px"></el-input-number> -
                            <el-input-number v-model="form5.js" :min="0" :max="59" label="请选择" style="width: 120px"></el-input-number> 月
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form5.second" label="3" style="line-height: 36px; margin-right: 10px"></el-radio>从
                            <el-input-number v-model="form5.zxks" :min="1" :max="365" label="请选择" style="width: 120px"></el-input-number
                            >日开始,每
                            <el-input-number v-model="form5.zxjs" :min="1" :max="12" label="请选择" style="width: 120px"></el-input-number
                            >月执行一次
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form5.second" label="4" style="line-height: 36px; margin-right: 10px"></el-radio>指定
                            <div style="margin-left: 23px">
                                <el-checkbox
                                    v-model="item.isCheck"
                                    v-for="item in monthRange"
                                    v-bind:key="item.value"
                                    @change="changeCheck"
                                    >{{ item.value }}</el-checkbox
                                >
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-tab-pane>
            <el-tab-pane label="周" name="six">
                <div class="form">
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form6.second" label="1" style="line-height: 36px; margin-right: 10px"></el-radio>每天
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form6.second" label="2" style="line-height: 36px; margin-right: 10px"></el-radio>不指定
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio
                                v-model="form6.second"
                                label="3"
                                style="line-height: 36px; margin-right: 10px; margin-bottom: 5px"
                            ></el-radio
                            >周期从星期
                            <el-input-number v-model="form6.ks" :min="1" :max="7" label="请选择" style="width: 120px"></el-input-number> -
                            星期
                            <el-input-number v-model="form6.js" :min="1" :max="7" label="请选择" style="width: 120px"></el-input-number>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form6.second" label="4" style="line-height: 36px; margin-right: 10px"></el-radio>第
                            <el-input-number v-model="form6.zxks" :min="1" :max="4" label="请选择" style="width: 120px"></el-input-number
                            >周的星期
                            <el-input-number v-model="form6.zxjs" :min="1" :max="7" label="请选择" style="width: 120px"></el-input-number>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form6.second" label="5" style="line-height: 36px; margin-right: 10px"></el-radio
                            >本月最后一个星期
                            <el-input-number v-model="form6.xqj" :min="1" :max="7" label="请选择" style="width: 120px"></el-input-number>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form6.second" label="6" style="line-height: 36px; margin-right: 10px"></el-radio>指定
                            <div style="margin-left: 23px">
                                <el-checkbox
                                    v-model="item.isCheck"
                                    v-for="item in weekRange"
                                    v-bind:key="item.value"
                                    @change="changeCheck"
                                    >{{ item.value }}</el-checkbox
                                >
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-tab-pane>
            <el-tab-pane label="年" name="seven">
                <div class="form">
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form7.second" label="1" style="line-height: 36px; margin-right: 10px"></el-radio>不指定
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio v-model="form7.second" label="2" style="line-height: 36px; margin-right: 10px"></el-radio>每年
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col span="24">
                            <el-radio
                                v-model="form7.second"
                                label="3"
                                style="line-height: 36px; margin-right: 10px; margin-bottom: 5px"
                            ></el-radio
                            >周期从
                            <el-input-number
                                v-model="form7.ks"
                                :min="2024"
                                :max="3000"
                                label="请选择"
                                style="width: 120px"
                            ></el-input-number>
                            -
                            <el-input-number
                                v-model="form7.js"
                                :min="2024"
                                :max="3000"
                                label="请选择"
                                style="width: 120px"
                            ></el-input-number>
                        </el-col>
                    </el-row>
                </div>
            </el-tab-pane>
        </el-tabs>
        <div class="table">
            <el-table :data="tableData" border style="width: 100%" size="small">
                <el-table-column prop="item" label="项" width="180"> </el-table-column>
                <el-table-column prop="plan" label="计划" width="180"> </el-table-column>
                <el-table-column prop="time" label="最近5次运行时间"> </el-table-column>
                <el-table-column prop="set" label="常用设置"> </el-table-column>
            </el-table>
            <div style="margin: 10px 0">描述：{{ remark }}</div>
            <div>
                <el-button type="primary" @click="sure">确定</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import {Utility} from '@/libs/utility'
import {PopupCommon} from '@/libs/popupCommon'
export default {
    components: {},
    data() {
        return {
            remark: '每月，每天，0时，0分，0秒 执行',
            timeRange: [],
            amRange: [],
            pmRange: [],
            dayRange: [],
            monthRange: [],
            weekRange: [],
            activeName: 'one',
            dialogShow: false,
            eleType: Utility.getDictList('elecType'),
            elecTypeFunc: Utility.getDictList('elecTypeFunc'),
            rules: {
                name: [{required: true, message: '请填写定时设置名称', trigger: ['blur', 'change']}],
                device: [{required: true, message: '请选择设备', trigger: ['blur', 'change']}],
                func: [{required: true, message: '请选择功能', trigger: ['blur', 'change']}],
                num: [{required: true, message: '请填写超时自动重抄次数', trigger: ['blur', 'change']}],
                bds: [{required: true, message: '请设置定时时间', trigger: ['blur', 'change']}],
                desc: [{required: true, message: '请填写设置描述', trigger: ['blur', 'change']}]
                // device: [
                //     {required: true, message: "请输入密码", trigger: "blur"},
                //     // {max: 16, message: "不能大于16个字符", trigger: "blur"}
                // ]
            },
            form1: {
                second: '',
                js: '2',
                ks: '1',
                zxks: '0',
                zxjs: '1'
            },
            form2: {
                second: '',
                js: '2',
                ks: '1',
                zxks: '0',
                zxjs: '1'
            },
            form3: {
                second: '',
                js: '2',
                ks: '1',
                zxks: '0',
                zxjs: '1'
            },
            form4: {
                second: '',
                js: '2',
                ks: '1',
                zxks: '0',
                zxjs: '1'
            },
            form5: {
                second: '',
                js: '2',
                ks: '1',
                zxks: '0',
                zxjs: '1'
            },
            form6: {
                second: '',
                js: '2',
                ks: '1',
                zxks: '0',
                zxjs: '1',
                xqj: '1'
            },
            form7: {
                second: '',
                js: '2025',
                ks: '2024'
            },
            tableData: [
                {
                    id: 1,
                    item: '秒',
                    plan: '',
                    time: '',
                    set: ''
                },
                {
                    id: 2,
                    item: '分钟',
                    plan: '',
                    time: '',
                    set: ''
                },
                {
                    id: 3,
                    item: '小时',
                    plan: '',
                    time: '',
                    set: ''
                },
                {
                    id: 4,
                    item: '日',
                    plan: '',
                    time: '',
                    set: ''
                },
                {
                    id: 5,
                    item: '月',
                    plan: '',
                    time: '',
                    set: ''
                },
                {
                    id: 6,
                    item: '周',
                    plan: '',
                    time: '',
                    set: ''
                },
                {
                    id: 7,
                    item: '年',
                    plan: '',
                    time: '',
                    set: ''
                }
            ]
        }
    },

    methods: {
        sure() {
            this.$emit('close', this.remark)
        },
        changeCheck(e) {
            console.log(e)
        },
        submitForm(formName) {
            // let that = this
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    PopupCommon.notify('info', '添加完成')
                } else {
                    PopupCommon.notify('info', '请完善表单内容')
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        }
    },
    mounted() {
        let timeRange = []
        for (let index = 0; index < 60; index++) {
            if (index < 10) {
                timeRange.push({
                    value: '0' + index,
                    isCheck: false
                })
            } else {
                timeRange.push({
                    value: index.toString(),
                    isCheck: false
                })
            }
        }
        this.timeRange = timeRange

        let amRange = []
        let pmRange = []
        let dayRange = []
        let monthRange = []
        let weekRange = [
            {
                value: '星期一',
                isCheck: false
            },
            {
                value: '星期二',
                isCheck: false
            },
            {
                value: '星期三',
                isCheck: false
            },
            {
                value: '星期四',
                isCheck: false
            },
            {
                value: '星期五',
                isCheck: false
            },
            {
                value: '星期六',
                isCheck: false
            },
            {
                value: '星期天',
                isCheck: false
            }
        ]
        for (let index = 0; index < 12; index++) {
            if (index < 10) {
                amRange.push({
                    value: '0' + index,
                    isCheck: false
                })
            } else {
                amRange.push({
                    value: index.toString(),
                    isCheck: false
                })
            }
        }
        for (let index = 12; index < 24; index++) {
            pmRange.push({
                value: index.toString(),
                isCheck: false
            })
        }
        for (let index = 1; index < 366; index++) {
            dayRange.push({
                value: index.toString(),
                isCheck: false
            })
        }
        for (let index = 1; index < 13; index++) {
            monthRange.push({
                value: index.toString(),
                isCheck: false
            })
        }
        this.amRange = amRange
        this.pmRange = pmRange
        this.dayRange = dayRange
        this.monthRange = monthRange
        this.weekRange = weekRange
    }
}
</script>

<style lang="scss">
.tjdssz {
    position: relative;
    top: -26px;
    .el-tabs__content {
        top: -26px;
    }
    .el-table--small {
        .el-table__cell {
            padding: 2px 0;
        }
    }
    .form {
        margin-top: 20px;
    }
    .table {
        margin-top: 0x;
    }
    .el-checkbox {
        margin-right: 10px;
    }
    .set {
        color: #409eff;
        margin-left: 10px;
        cursor: pointer;
    }
    .el-radio__label {
        display: none;
    }
}
</style>
